<template>
    <transition name = "confirm-fadeto">
        <div class="confirm" v-show="showflag" @click.stop>
            <div class="confirm-wrapper">
                <div class="confirm-content">
                    <p class="text">{{text}}</p>
                    <div class="operate">
                        <div class="operate-btn left" @click="cancle">{{cancelBtnText}}</div>
                        <div class="operate-btn" @click="confirm">{{confirmBtnText}}</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props:{
        text:{
            type:String,
            default:''
        },
        confirmBtnText: {
            type: String,
            default: '确定'
        },
        cancelBtnText: {
            type: String,
            default: '取消'
        }
    },
    methods:{
        show(){
            this.showflag = true;
        },
        hide(){
             this.showflag = false;
        },
        confirm(){
            this.hide();
            this.$emit('confirm')
        },
        cancle(){
            this.hide()
        }
    },
    data(){
        return{
            showflag:false
        }
    }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.confirm
    position fixed
    left 0
    top 0
    right 0
    bottom 0
    z-index 998
    background-color $color-text-d
    &.confirm-fadeto-enter-active
        animation confirm-fadein 0.3s
        .confirm-content
            animation confirm-zoom 0.3s
    .confirm-wrapper
        position absolute
        top 50%
        left  50%
        transform translate(-50%,-50%)
        z-index 999
        .confirm-content
            background-color $color-highlight-background
            width 270px
            border-radius 13px
            .text
                padding 19px 15px
                line-height 22px
                text-align center
                font-size: $font-size-large
                color: $color-text-l
            .operate
                display flex
                align-items center
                font-size: $font-size-large
                .operate-btn
                    flex 1
                    line-height: 22px
                    padding: 10px 0
                    border-top: 1px solid $color-background-d
                    color: $color-text-d
                    text-align center
                    &.left
                        border-right: 1px solid $color-background-d
@keyframes confirm-fadein
    0%
        opacity: 0
    100%
        opacity: 1

@keyframes confirm-zoom
    0%
        transform: scale(0)
    50%
        transform: scale(1.1)
    100%
        transform: scale(1)
</style>